<template>
  <div class="g2-page404">
    <div class="page404-content">
      <div class="page404-left">
        <img src="~@public/image/error/404.svg" alt>
      </div>

      <div class="page404-right">
        <h1>404</h1>
        <h5 style="padding: 20px 0;font-size:18px;">抱歉，你访问的页面不存在...</h5>
        <el-button size="large" type="primary" @click="handleClickGotoHome">返回主页</el-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "page404",
  methods: {
    //跳转到主页
    handleClickGotoHome() {
      this.$router.push("/login");
    }
  }
};
</script>

<style lang="scss">
@import "~@scss/themes/index.scss";
@import "~@scss/helpers/_mixins.scss";
@import "~@scss/helpers/_utils.scss";

.g2-page404 {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
  min-height: 500px;
  .page404-content {
    position: relative;
    display: flex;
    height: 450px;
    width: 100%;
    text-align: center;
    margin: auto 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding-top: 100px;
    .page404-left {
      flex: 0 0 50%;
      text-align: right;
    }
    .page404-right {
      flex: 1 1 auto;
      text-align: left;
      padding: 0 100px;
    }
  }
}
</style>

